// !#1 引入 React 核心包
// import React from 'react'
// !#2 负责渲染的包（虚拟 DOM 转真实 DOM 并渲染）
import ReactDOM from 'react-dom/client'

// !#3 创建一个虚拟 DOM
const list = [
  { id: 1, name: '武汉黑马前端64期', salary: 11000 },
  { id: 2, name: '武汉黑马前端66期', salary: 13000 },
  { id: 3, name: '武汉黑马前端68期', salary: 15000 },
]

const wrapEle = (
  <ul>
    {list.map((item) => (
      <li key={item.id}>
        <h3>班级：{item.name}</h3>
        <p>工资：{item.salary}</p>
      </li>
    ))}
  </ul>
)

// !#4 把虚拟 DOM 渲染到页面
// 渲染到哪儿、渲染谁
ReactDOM.createRoot(document.querySelector('#root')).render(wrapEle)
